<script setup>
import { computed, ref } from 'vue'
import customTabs from '@/components/custom-tabs/custom-tabs.vue'
import customSticky from '@/components/custom-sticky/custom-sticky.vue'
import feedList from './components/feed-list.vue'
import doctorList from './components/doctor-list.vue'
import { getDocList, getHomeKnowledge } from '@/apis/doctor.js';

// 获取安全区域数据
const { safeAreaInsets } = uni.getSystemInfoSync()
// 标签页索引值
const tabIndex = ref(0)
// 标签页数据
const feedTabs = ref([
  {
    label: '推荐',
    type: 'recommend',
    current: 1,
    hasMore: true,
    list: [],
    rendered: true
  },
  {
    label: '关注',
    type: 'like',
    current: 1,
    hasMore: true,
    list: [],
    rendered: false
  },
  {
    label: '减脂',
    type: 'fatReduction',
    current: 1,
    hasMore: true,
    list: [],
    rendered: false
  },
  {
    label: '饮食',
    type: 'food',
    current: 1,
    hasMore: true,
    list: [],
    rendered: false
  }
])

//记录tab类型
const tabType=computed(()=>feedTabs.value[tabIndex.value].type)
//记录当前页码
const currentType=computed(()=>feedTabs.value[tabIndex.value].current)
//记录显示条数
const pageSize=ref(10)

// 切换标签页
function onFeedTabChange({index}) {
	// console.log(e);
  tabIndex.value = index
	if(!feedTabs.value[index].rendered) getKnowledgelist()
	//组件缓存:获取标签页数据
	feedTabs.value[index].rendered=true
	
}

//获取知识列表
const getKnowledgelist=async()=>{
	uni.showLoading({
		title:"正在加载中...",
		mask:true
	})
	const res= await getHomeKnowledge({type:tabType.value,current:currentType.value,pageSize:pageSize.value})
	uni.hideLoading()
	// 获取列表中原来的数据
	const list=feedTabs.value[tabIndex.value].list
	//新的数据赋值给原来的数组
  feedTabs.value[tabIndex.value].list=[...list,...res.data.rows]
	// 获取当页页码
	const current=feedTabs.value[tabIndex.value].current
	//加载下一页
	feedTabs.value[tabIndex.value].current=current+1
	//没有数据了
	feedTabs.value[tabIndex.value].hasMore=current+1<=res.data.pageTotal
	}
getKnowledgelist()

//滚动加载
const onScrolltolower=()=>{
	//没有数据停止发送请求
	if(feedTabs.value[tabIndex.value].hasMore) getKnowledgelist()
}


const docList=ref([])
//获取关注医生列表
const getDoc=async()=>{
	const res= await getDocList()
	console.log(res);
	docList.value=res.data.rows
}
getDoc()
</script>
<template>
  <scroll-page @scrolltolower="onScrolltolower">
    <view
      class="index-page"
      :style="{ backgroundPositionY: -48 + safeAreaInsets.top + 'px' }"
    >
      <!-- 页面导航 -->
      <view
        :style="{ paddingTop: safeAreaInsets.top + 'px' }"
        class="page-navbar"
        >优医</view
      >

      <!-- 搜索栏 -->
      <view class="search-bar">
        <input
          placeholder-class="input-placeholder"
          placeholder="搜一搜: 疾病/症状/医生/健康知识"
          class="input"
          type="text"
        />
        <view class="icon-search">
          <uni-icons size="22" color="#C3C3C5" type="search" />
        </view>
      </view>
      <!-- 快速入口 -->
      <view class="quick-entry">
        <navigator hover-class="none" class="quick-entry-item">
          <image
            class="quick-entry-icon"
            src="/static/images/quick-entry-1.png"
          />
          <text class="label">问医生</text>
          <text class="small">按科室查问医生</text>
        </navigator>
        <navigator
          hover-class="none"
          class="quick-entry-item"
          url="/subpkg_consult/quickly/index?type=2"
        >
          <image
            class="quick-entry-icon"
            src="/static/images/quick-entry-2.png"
          />
          <text class="label">极速问诊</text>
          <text class="small">20s医生极速回复</text>
        </navigator>
        <navigator hover-class="none" class="quick-entry-item">
          <image
            class="quick-entry-icon"
            src="/static/images/quick-entry-3.png"
          />
          <text class="label">开药门诊</text>
          <text class="small">线上买药更方便</text>
        </navigator>
      </view>
      <!-- 快速查看 -->
      <view class="quick-view">
        <navigator
          hover-class="none"
          class="quick-view-item"
          url="/subpkg_medicine/order_list/index"
        >
          <image
            class="quick-view-icon"
            src="/static/images/quick-view-1.png"
          />
          <text class="label">药品订单</text>
        </navigator>
        <navigator
          hover-class="none"
          class="quick-view-item"
          url="/subpkg_archive/list/index"
        >
          <image
            class="quick-view-icon"
            src="/static/images/quick-view-2.png"
          />
          <text class="label">健康档案</text>
        </navigator>
        <navigator hover-class="none" class="quick-view-item">
          <image
            class="quick-view-icon"
            src="/static/images/quick-view-3.png"
          />
          <text class="label">我的处方</text>
        </navigator>
        <navigator hover-class="none" class="quick-view-item">
          <image
            class="quick-view-icon"
            src="/static/images/quick-view-4.png"
          />
          <text class="label">疾病查询</text>
        </navigator>
      </view>
      <!-- 广告位 -->
      <view class="banner-placeholder">
        <swiper
          class="uni-swiper"
          indicator-dots
          indicator-color="#ffffff99"
          indicator-active-color="#fff"
          circular
        >
          <swiper-item>
            <navigator hover-class="none" class="navigator" url=" ">
              <image class="banner-image" src="/static/images/banner-1.png" />
            </navigator>
          </swiper-item>
          <swiper-item>
            <navigator hover-class="none" class="navigator" url=" ">
              <image
                class="banner-image"
                src="/static/images/banner-1.png"
                mode="aspectFill"
              />
            </navigator>
          </swiper-item>
        </swiper>
      </view>
      <!-- 标签页列表 -->
			 <view
			        class="doctor-feeds"
			        :style="{ marginTop: -safeAreaInsets.top + 'px' }"
			      >
			        <custom-sticky :offset-top="safeAreaInsets.top + 'px'">
			          <custom-tabs @click="onFeedTabChange" :list="feedTabs" />
			        </custom-sticky>
						
							<!-- 关注知识列表 -->
							<view v-for="(item, index) in feedTabs" :key="item.type" v-show="tabIndex === index">
								<!-- 医生列表 -->
								<doctor-list :list="docList" v-if="item.type === 'recommend'" />
								<!-- 知识列表 -->
							  <feed-list :list="item.list" v-if="item.rendered"/>
							</view>
			  </view>
    </view>
  </scroll-page>
</template>
<style lang="scss">
@import './index.scss';
</style>